<template>
    <div>
        <h1>编辑卡券</h1>
            <table class="table">
                <tbody>
                    <tr>
                        <td>卡券名称：</td>
                        <td>
                            <input type="text" v-model="data.name">
                        </td>
                    </tr>
                    <tr>
                        <td>门店：</td>
                        <td>
                            <select v-model="data.shopSortId">
                                <option value="0">请选择门店</option>
                                <option v-for="shop in shops" :key="shop.id" :value="shop.id">{{shop.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>卡券类型：</td>
                        <td>
                            <select v-model="data.couponTypeId">
                                <option value="0">请选择卡券类型</option>
                                <option v-for="type in types" :key="type.id" :value="type.id">{{type.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>使用日期：</td>
                        <td>
                            <span v-for="d in days">
                                <input v-model="daysdata" type="checkbox" :value="d"> {{ d }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>有效期：</td>
                        <td>
                            <input type="text" v-model="data.detail" placeholder="有效期">
                        </td>
                    </tr>
                    <tr>
                        <td>价格：</td>
                        <td>
                            <input type="number" v-model="data.price">
                        </td>
                    </tr>
                    <tr>
                        <td>排序：</td>
                        <td>
                            <input type="number" v-model="data.sort">
                        </td>
                    </tr>
                    <tr>
                        <td>状态：</td>
                        <td>
                            <select v-model="data.couponStartId">
                                <option value="0">请选择状态</option>
                                <option v-for="status in statuses" :key="status.id" :value="status.id">{{status.name}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>图片：</td>
                        <td>
                            <input type="file">
                            <img :src="'https://localhost:7155/'+data.img" alt="" style="width: 60px;height: 60px;">
                        </td>
                    </tr>
                    <tr>
                        <td>是否启用：</td>
                        <td>
                            <input type="checkbox" v-model="data.isOpen">打勾true启用，否则fase禁用
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="保存" @click="submitForm">
                            <input type="button" value="返回" @click="goBack">
                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const data = ref({
    id: 0,
    name: '',
    shopSortId: 0,
    days: '',
    detail: '',
    price: 0,
    sort: 0,
    img: '',
    couponStartId: 0,
    couponTypeId: 0,
    isOpen: true
});


const daysdata=ref([])
//使用日期使用
const days=ref(["周一","周二","周三","周四","周五","周六","周日"])

//门店
const shops = ref([{
    id: 0,
    name: ''
}]);

//卡券类型
const types = ref([{
    id: 0,
    name: ''
}]);
//状态
const statuses = ref([{
    id: 0,
    name: ''
}]);

// 获取门店列表
const getShops = () => {
     axios.get("/api/ShopSort/GetShopSorts").then(res=>{
        shops.value = res.data;
    })
};

// 获取卡券类型列表
const getTypes = () => {
     axios.get("/api/CouponType/CouponTypes").then(res=>{
        types.value = res.data;
    })
};

// 获取状态列表
const getStatuses = () => {
      axios.get("/api/CouponStart/GetCouponStarts").then(res=>{
        statuses.value = res.data;
    })
};

// 根据卡券编号获取卡券详情
const getCouponDetail = () => {
    //取地址栏中的卡券编号
    const vid = route.query.id;

    axios.get("/api/Coupon/GetCoupon",{params:{id:vid}}).then(res=>{
        data.value = res.data;
        //给所有状态复选框赋值
        //注意，解决多逗号
        if(data.value.days!=""){
             daysdata.value=data.value.days.split(',')
        }
        
    })

 /*    axios.get("/api/Coupon/GetCoupon?id="+vid).then(res=>{
        data.value = res.data;
    }) */

};

// 保存卡券
const submitForm = () => {
    data.value.days = daysdata.value.toString()
    axios.put("/api/Coupon/UpdateCoupon",data.value).then(res=>{
        if(res.data>0)
        {
            alert('更新成功')
            router.push("/")

        }
        else
        {
            alert('更新失败了。。。')
        }
    })
};

// 返回列表页
const goBack = () => {
    router.push('/');
};

onMounted(() => {
    getShops();    //获取门店列表
    getTypes();    //获取卡券类型列表
    getStatuses(); // 获取状态列表


    getCouponDetail(); //根据卡券编号获取卡券详情,好让网页上显示出数据
});
</script>

<style scoped>

</style> 